import React, { useState, useEffect } from "react";
import { Tabs } from "react-vant";
import List from "./components/list1";
import ListAdd from "./components/listAdd1";
import "./App.css";
import axios from "axios";
const App = () => {
  const [list, setList] = useState([]);

  const fetchList = () => {
    axios.get("/api/list").then((resp) => {
      setList(resp.data);
    });
  };

  useEffect(() => {
    fetchList();
  }, []);
  return (
    <div>
      <Tabs onChange={() => fetchList()}>
        <Tabs.TabPane title="列表">
          <List list={list}></List>
        </Tabs.TabPane>
        <Tabs.TabPane title="添加">
          <ListAdd></ListAdd>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default App;
